<script setup lang="ts">
import Header from "@/components/common/Header.vue";
import Footer from "@/components/common/Footer.vue";
import {ArrowRight,CaretTop,CaretBottom} from "@element-plus/icons-vue";
import {onBeforeMount, ref, computed, Ref} from "vue";
import CourseCard from "@/components/common/CourseCard.vue";
import {getFirstCategory,getSecondCategory,getCourseList} from "@/api/home";

let isVipRadio = ref(-1)//是否免费 1:免费 2:会员 其他：无此筛选条件
let firstCategoryList:Ref<any[]> = ref([]) //一级分类数据
let secondCategoryList:Ref<any[]> = ref([]) //二级分类数据
let sortBy = ref(-1) //当前选中的排序方式
let priceFlag = ref(false) //价格排序 false:升序 true:降序
let pageInfo:Ref<any> = ref({
  total:0,
}) //分页数据
let filterObj:Ref<any> = ref({
  pageNum:1, //当前页码
  pageSize:8,
  entity:{
    firstCategory: '',
    secondCategory: '',
    courseLevel: '',
    sortBy: '',
    isFree: '',
    isMember: '',
  },
}) //筛选条件对象

const sortType = computed(() => {//排序方式
  switch (sortBy.value) {
    case 1:
      return 'time-desc';
    case 2:
      return 'clicks-desc';
    case 3:
      return 'price-asc';
    case 4:
      return 'price-desc';
    default:
      return 'time-desc';
  }
});
const getFirstCategoryList = async ()=>{
  //获取一级分类数据
   const res = await getFirstCategory()
  firstCategoryList.value = res.data.list
  console.log(res)
}
const getSecondCategoryList = async (id:string)=>{
  //获取二级分类数据
   if(id===''){ id = '-1'}
   const res = await getSecondCategory(id)
   secondCategoryList.value = res.data.list
   console.log(res)
}
const initFilter = (...arg :string[])=>{
  for (let i=0;i<arg.length;i++){
    filterObj.value.entity[arg[i]] = ''
  }
  isVipRadio.value = -1
  sortBy.value = -1
}
const changeFirst = async (id:string)=>{
  //一级分类改变
  filterObj.value.entity.firstCategory = id
  initFilter('secondCategory','isFree','isMember','sortBy','courseLevel')
  await getSecondCategoryList(id)
  getCourseListData()
}
const changeSecond = (id:string)=>{
  //二级分类改变
  filterObj.value.entity.secondCategory = id
  initFilter('isFree','isMember','sortBy','courseLevel')
  getCourseListData()
}
const changeLevel = (level:string)=>{
  //课程难度改变
  filterObj.value.entity.courseLevel = level
  initFilter('isFree','isMember','sortBy',)
  getCourseListData()
}
const changeSort = (sortT:number|boolean)=>{
  if(sortT === priceFlag.value){
    sortBy.value = priceFlag.value ? 3 : 4
    priceFlag.value = !priceFlag.value
  }else {
    sortBy.value = sortT as number
  }
  filterObj.value.entity.sortBy = sortType.value
  getCourseListData()
}
const getCourseListData = async ()=>{
  //获取课程数据
  let dataObj = {...filterObj.value}
  const res = await getCourseList(dataObj)
  pageInfo.value = res.data.pageInfo
  console.log('pageInfo',pageInfo)
}
const changePage = (page:number)=>{
  filterObj.value.pageNum = page
  getCourseListData()
}
const changeIsVip = ()=>{
  filterObj.value.entity.isFree = isVipRadio.value === 1 ? '1' : ''
  filterObj.value.entity.isMember = isVipRadio.value === 2 ? '1' : ''
  getCourseListData()
 }

onBeforeMount(()=>{
  getFirstCategoryList()
  getSecondCategoryList('-1')
  getCourseListData()
})
</script>

<template>
<Header/>
  <div class="course-main">
    <div class="course-nav">
      <div class="course-nav-top">
        <div class="top-main">
          <div>
            <p>课程方向 <el-icon><ArrowRight /></el-icon></p>
            <ul>
              <li><a href="javascript:;" :class="{active:filterObj.entity.firstCategory === ''}" @click="changeFirst('')">全部</a></li>
              <li v-for="item in firstCategoryList" :key="item?.id">
                <a href="javascript:;"
                     :class="{active:filterObj.entity.firstCategory === item.id}"
                   @click="changeFirst(item.id)"
                >
                  {{ item.categoryName }}
                </a>
              </li>
            </ul>
          </div>
          <div>
            <p>课程分类 <el-icon><ArrowRight /></el-icon></p>
            <ul>
              <li><a href="javascript:;" :class="{active:filterObj.entity.secondCategory === ''}" @click="changeSecond('')">全部</a></li>
              <li v-for="item in secondCategoryList" :key="item">
                <a href="javascript:;"
                   :class="{active:filterObj.entity.secondCategory === item.id}"
                   @click="changeSecond(item.id)"
                >{{item.categoryName}}</a>
              </li>
            </ul>
          </div>
          <div>
            <p>课程难度 <el-icon><ArrowRight /></el-icon></p>
            <ul>
              <li><a href="javascript:;" @click="changeLevel('')" :class="{active:filterObj.entity.courseLevel === ''}">全部</a></li>
              <li ><a href="javascript:;" @click="changeLevel('1')" :class="{active:filterObj.entity.courseLevel === '1'}">初级</a></li>
              <li ><a href="javascript:;" @click="changeLevel('2')" :class="{active:filterObj.entity.courseLevel === '2'}">中级</a></li>
              <li ><a href="javascript:;" @click="changeLevel('3')" :class="{active:filterObj.entity.courseLevel === '3'}">高级</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="course-nav-bottom">
        <div class="filter">
          <div class="filter-left">
            <a href="javascript:;" :class="{active:sortBy===-1}"   @click="changeSort(-1)">综合</a>
            <a href="javascript:;" :class="{active:sortBy===1}"  @click="changeSort(1)">最新课程</a>
            <a href="javascript:;" :class="{active:sortBy===2}"  @click="changeSort(2)">最多购买</a>
            <a href="javascript:;" :class="{active:Number(sortBy)>=3}"  @click="changeSort(priceFlag)">价格</a>
            <div class="filter-price-icon" >
              <el-icon :class="{active:sortBy===3}"><CaretTop /></el-icon>
              <el-icon :class="{active:sortBy===4}"><CaretBottom /></el-icon>
            </div>
          </div>
          <div class="filter-right">
            <el-radio-group v-model="isVipRadio" @change="changeIsVip">
              <el-radio :label="1">免费课程</el-radio>
              <el-radio :label="2">会员课程</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
    <div class="course-content">
      <ul>
        <li v-for="item in pageInfo.list" :key="item">
          <CourseCard
           :title="item.courseName"
           :img-url="item.courseCover"
           :dengji="item.courseLevel"
           :count="item.clicks"
           :price="item.salePrice"
           :member = "item.isMember"
          />
        </li>
      </ul>
      <div class="pagination"  v-if="pageInfo.pages >1">
        <el-button type="text" :disabled="filterObj.pageNum === 1" @click="filterObj.pageNum=1">首页</el-button>
        <el-pagination background layout="prev, pager, next"
                       v-model:current-page="filterObj.pageNum"
                       @change="changePage"
                       :total="pageInfo?.total"
                       :page-size="filterObj.pageSize"
                       :prev-text="`上一页`"
                       :next-text="`下一页`"
                       :hide-on-single-page="true" />
        <el-button type="text" :disabled="filterObj.pageNum === pageInfo.pages" @click="filterObj.pageNum=pageInfo.pages">尾页</el-button>
      </div>
    </div>
  </div>
<Footer/>
</template>

<style scoped>
.course-main{
  width: 100%;
  margin: 0 auto;
  .course-nav{
    width: 100%;
    .course-nav-top{
      background: #f3f5f9;
      padding: 30px 0;
      .top-main{
        width: 1000px;
        margin: 0 auto;
        div{
          display: flex;
          p{
            color: #333;
            font-size: 14px;
            font-weight: 600;
            width: 80px;
            height: 48px;
            line-height: 48px;
            position: relative;
            .el-icon{
              position: absolute;
              right: 0;
              top: calc((48px - 14px) /2);
            }
          }
          ul{
            display: flex;
            margin-left: 10px;
            flex-wrap: wrap;
            width: 910px;
            li{
              line-height: 48px;
              margin-left: 10px;
              a{
                padding: 5px 10px;
                border-radius: 5px;
                font-size: 14px;
                color: #515759;
                &:hover,&.active{
                  background: #2c80ff1a;
                  color: #388FFF;
                }
              }
            }
          }
        }
      }
    }
    .course-nav-bottom{
      width: 1000px;
      margin: 0 auto;
      padding-top: 40px;
      .filter{
        display: flex;
        justify-content: space-between;
        .filter-left{
          display: flex;
          font-size: 14px;
          a{
            &.active{
              color: #388FFF;
            }
            &+a{
              margin-left: 20px;
            }
            &+a:before{
              content: "|";
              margin-right:20px ;
              color: #333;
            }
          }
          .filter-price-icon{
            display: flex;
            flex-direction: column;
            font-size: 14px;
            position: relative;
            i{
              position: absolute;
              top: -2px;
              &:last-child{
                top: 4px;
              }
              &.active{
                color: #388FFF;
              }
            }
          }
        }
        .filter-right{
          :deep(.el-radio__inner){
            border-radius: inherit;
          }
          :deep(.el-radio__input.is-checked .el-radio__inner){
            background-color: #fff ;
            border-radius: inherit;
            &:after{
              background-color: #388FFF;
              width: 8px;
              height: 8px;
              border-radius: inherit;
            }
          }
        }
      }
    }
  }
  .course-content{
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 20px;
    ul{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: start;
      li{
        margin-top: 20px;
        margin-right: 25px;
        &:nth-child(4n){
          margin-right: 0;
        }
      }
    }
    .pagination{
      margin-top: 40px;
      display: flex;
      justify-content: center;
      :deep(.el-pagination){
        justify-content: center;
      }
      :deep(.el-button--text.is-disabled),.el-button--text.is-disabled{
        background-color: #f0f2f5 !important;
        color:#a8abb2 ;
      }
      button{
        background-color: #f0f2f5;
        padding: 10px;
        margin-right: 10px;
        color: #303133;
        &:last-child{
          margin-right: 0;
          margin-left: 10px;
        }
        &:active{
          background-color: #409eff;
        }
      }
    }
  }
}
</style>